<template>
  <div id="fullpage">
    <!-- 封面 -->
    <div class="section active" id="section0">
      <div
        v-if="loading"
        class="u-absolute u-flex u-col-center u-row-center"
        style="top:0;width:100vw;height:100vh"
      >
        <van-loading size="24px" vertical>加载中...</van-loading>
      </div>
      <template v-else>
        <div class="u-absolute" style="top:0;width:100%;margin:0 auto;">
          <h1
            v-animate="{ name: 'zoomInDown', delay: 500 }"
            class="u-type-primary-light"
          >
            我的刀塔
          </h1>
          <p
            v-animate="{ name: 'zoomInDown', delay: 1000 }"
            class="u-type-info-light "
          >
            好友榜
          </p>
        </div>
        <div
          class="u-absolute u-type-primary-light u-font-14"
          style="bottom:25%;width:100%;margin:0 auto;"
          v-animate="{ name: 'fadeIn', delay: 2000 }"
        >
          <div>
            <span class="u-m-r-4">我是</span
            ><span class="u-font-20 u-font-bold">{{ playerName }}</span>
          </div>
          <p>这是我的Dota2好友榜</p>
        </div>
        <div
          v-animate="{ name: 'fadeIn', delay: 2000 }"
          class="u-absolute u-type-primary-light"
          style="top:40%;width:100%;margin:0 auto;line-height:20px;"
        >
          谁是好队友,谁是潜在的内鬼<br />
          谁陪你游戏时间最多,谁又渐离渐远
        </div>
        <div
          class="u-absolute"
          style="bottom:10%;width:100%;margin:0 auto;"
          v-animate="{ name: 'fadeIn', delay: 2000 }"
        >
          <van-button
            style="width:160px"
            v-animate="{ name: 'pulse', duration: 2400, infinite: true }"
            round
            type="danger"
            @click="handleToNext"
            >进入</van-button
          >
        </div>
      </template>
    </div>
    <!-- 游戏场数最多 -->
    <div class="section" id="section1">
      <div
        v-if="active[1]"
        class="u-absolute u-type-primary-light"
        style="top:20px;width:100%;"
      >
        <div class="u-flex u-row-between u-m-b-20 u-p-r-10 u-p-l-10">
          <div
            class="u-flex u-flex-row"
            v-animate="{ name: 'lightSpeedInLeft', delay: 500 }"
          >
            <div>
              <van-image
                round
                height="40"
                width="40"
                fit="cover"
                :src="palyerAvatar"
              ></van-image>
            </div>
            <div class="u-font-18 u-m-l-4">
              <div class="u-m-b-4">游戏场次</div>
              <div class="u-type-warning">最多</div>
            </div>
          </div>
          <div v-animate="{ name: 'lightSpeedInRight', delay: 500 }">
            <div>
              <van-image
                round
                height="30"
                width="30"
                fit="cover"
                class="u-m-b-4"
                :src="peerListSortByGameCount[0]?.avatarfull"
              ></van-image>
              <div>
                <van-tag type="danger" class="u-m-r-4">1st</van-tag>
                {{ peerListSortByGameCount[0]?.personaname }}
              </div>
            </div>
          </div>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">你 与 TA 并肩作战了 </span>
          <span class="u-font-20" style="color:red;font-weight:700;">{{
            peerListSortByGameCount[0]?.games
          }}</span>
          <span class="u-font-14"> 场游戏</span>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">游戏胜率 </span>
          <span class="u-font-20" style="color:red;font-weight:700;"
            >{{
              (peerListSortByGameCount[0]?.win_probability * 100).toFixed(2)
            }}%</span
          >
        </div>

        <div
          class="u-m-b-40 u-font-14"
          v-animate="{ name: 'jackInTheBox', delay: 1000 }"
        >
          看到 TA 的 id 是否令你想起了那些一起开黑的那些时光?
        </div>

        <van-row
          class="u-m-b-4"
          v-animate="{ name: 'slideInRight', delay: 1000 }"
        >
          <van-col span="4">排名</van-col>
          <van-col span="12">昵称</van-col>
          <van-col span="3">场数</van-col>
          <van-col span="3">胜率</van-col>
        </van-row>
        <div
          class="u-m-b-4 u-font-12 u-p-r-10 u-p-l-10"
          v-for="(player, index) in peerListSortByGameCount.slice(1, 10)"
          :key="player.account_id"
          v-animate="{ name: 'slideInRight', delay: 1000 + index * 100 }"
        >
          <van-row
            class="u-line-1"
            type="flex"
            justify="space-around"
            align="center"
          >
            <van-col class="u-text-left" span="2">
              <van-tag type="primary">{{ index + 2 }}</van-tag>
            </van-col>
            <van-col span="4">
              <van-image
                round
                height="28"
                width="28"
                fit="cover"
                :src="player.avatarfull"
              ></van-image>
            </van-col>
            <van-col class="u-text-left u-line-1" span="10">{{
              player.personaname
            }}</van-col>
            <van-col span="4">{{ player.games }}</van-col>
            <van-col span="4"
              >{{ (player.win_probability * 100).toFixed(2) }}%</van-col
            >
          </van-row>
        </div>
      </div>
      <div
        class="u-absolute u-type-primary-light"
        style="bottom:20px;width:100%;"
        @click="handleToNext"
      >
        <van-icon
          v-animate="{ name: 'fadeInDown', duration: 2000, infinite: true }"
          size="30"
          name="arrow-down"
        />
      </div>
    </div>
    <!-- 游戏场数最少 -->
    <div class="section" id="section2">
      <div
        v-if="active[2]"
        class="u-absolute u-type-primary-light"
        style="top:20px;width:100%;"
      >
        <div class="u-flex u-row-between u-m-b-20 u-p-r-10 u-p-l-10">
          <div
            class="u-flex u-flex-row"
            v-animate="{ name: 'lightSpeedInLeft', delay: 500 }"
          >
            <div>
              <van-image
                round
                height="40"
                width="40"
                fit="cover"
                :src="palyerAvatar"
              ></van-image>
            </div>
            <div class="u-font-18 u-m-l-4">
              <div class="u-m-b-4">游戏场次</div>
              <div class="u-type-warning">最少</div>
            </div>
          </div>
          <div v-animate="{ name: 'lightSpeedInRight', delay: 500 }">
            <div>
              <van-image
                round
                height="30"
                width="30"
                fit="cover"
                class="u-m-b-4"
                :src="peerListSortByGameCountReverse[0]?.avatarfull"
              ></van-image>
              <div>
                <van-tag type="danger" class="u-m-r-4">1st</van-tag>
                {{ peerListSortByGameCountReverse[0]?.personaname }}
              </div>
            </div>
          </div>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">你 与 TA 并肩作战了 </span>
          <span class="u-font-20" style="color:red;font-weight:700;">{{
            peerListSortByGameCountReverse[0]?.games
          }}</span>
          <span class="u-font-14"> 场游戏</span>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">游戏胜率 </span>
          <span class="u-font-20" style="color:red;font-weight:700;"
            >{{
              (
                peerListSortByGameCountReverse[0]?.win_probability * 100
              ).toFixed(2)
            }}%</span
          >
        </div>

        <div
          class="u-m-b-40 u-font-14"
          v-animate="{ name: 'jackInTheBox', delay: 1000 }"
        >
          你最近似乎很少和 TA 开黑 再忙别忘了常联系
        </div>

        <van-row
          class="u-m-b-4"
          v-animate="{ name: 'slideInRight', delay: 1000 }"
        >
          <van-col span="4">排名</van-col>
          <van-col span="12">昵称</van-col>
          <van-col span="3">场数</van-col>
          <van-col span="3">胜率</van-col>
        </van-row>
        <div
          class="u-m-b-4 u-font-12 u-p-r-10 u-p-l-10"
          v-for="(player, index) in peerListSortByGameCountReverse.slice(1, 10)"
          :key="player.account_id"
          v-animate="{ name: 'slideInRight', delay: 1000 + index * 100 }"
        >
          <van-row
            class="u-line-1"
            type="flex"
            justify="space-around"
            align="center"
          >
            <van-col class="u-text-left" span="2">
              <van-tag type="primary">{{ index + 2 }}</van-tag>
            </van-col>
            <van-col span="4">
              <van-image
                round
                height="28"
                width="28"
                fit="cover"
                :src="player.avatarfull"
              ></van-image>
            </van-col>
            <van-col class="u-text-left u-line-1" span="10">{{
              player.personaname
            }}</van-col>
            <van-col span="4">{{ player.games }}</van-col>
            <van-col span="4"
              >{{ (player.win_probability * 100).toFixed(2) }}%</van-col
            >
          </van-row>
        </div>
      </div>
      <div
        class="u-absolute u-type-primary-light"
        style="bottom:20px;width:100%;"
        @click="handleToNext"
      >
        <van-icon
          v-animate="{ name: 'fadeInDown', duration: 2000, infinite: true }"
          size="30"
          name="arrow-down"
        />
      </div>
    </div>
    <!-- 游戏胜率最高 -->
    <div class="section" id="section3">
      <div
        v-if="active[3]"
        class="u-absolute u-type-primary-light"
        style="top:20px;width:100%;"
      >
        <div class="u-flex u-row-between u-m-b-20 u-p-r-10 u-p-l-10">
          <div
            class="u-flex u-flex-row"
            v-animate="{ name: 'lightSpeedInLeft', delay: 500 }"
          >
            <div>
              <van-image
                round
                height="40"
                width="40"
                fit="cover"
                :src="palyerAvatar"
              ></van-image>
            </div>
            <div class="u-font-18 u-m-l-4">
              <div class="u-m-b-4">游戏胜率</div>
              <div class="u-type-warning">最高</div>
            </div>
          </div>
          <div v-animate="{ name: 'lightSpeedInRight', delay: 500 }">
            <div>
              <van-image
                round
                height="30"
                width="30"
                fit="cover"
                class="u-m-b-4"
                :src="peerListSortByWinProbability[0]?.avatarfull"
              ></van-image>
              <div>
                <van-tag type="danger" class="u-m-r-4">1st</van-tag>
                {{ peerListSortByWinProbability[0]?.personaname }}
              </div>
            </div>
          </div>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">你 与 TA 并肩作战了 </span>
          <span class="u-font-20" style="color:red;font-weight:700;">{{
            peerListSortByWinProbability[0]?.games
          }}</span>
          <span class="u-font-14"> 场游戏</span>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">游戏胜率 </span>
          <span class="u-font-20" style="color:red;font-weight:700;"
            >{{
              (peerListSortByWinProbability[0]?.win_probability * 100).toFixed(
                2
              )
            }}%</span
          >
        </div>

        <div
          class="u-m-b-40 u-font-14"
          v-animate="{ name: 'jackInTheBox', delay: 1000 }"
        >
          TA 是你的黄金搭档 你们在赛场上所向披靡
        </div>

        <van-row
          class="u-m-b-4"
          v-animate="{ name: 'slideInRight', delay: 1000 }"
        >
          <van-col span="4">排名</van-col>
          <van-col span="12">昵称</van-col>
          <van-col span="3">场数</van-col>
          <van-col span="3">胜率</van-col>
        </van-row>
        <div
          class="u-m-b-4 u-font-12 u-p-r-10 u-p-l-10"
          v-for="(player, index) in peerListSortByWinProbability.slice(1, 10)"
          :key="player.account_id"
          v-animate="{ name: 'slideInRight', delay: 1000 + index * 100 }"
        >
          <van-row
            class="u-line-1"
            type="flex"
            justify="space-around"
            align="center"
          >
            <van-col class="u-text-left" span="2">
              <van-tag type="primary">{{ index + 2 }}</van-tag>
            </van-col>
            <van-col span="4">
              <van-image
                round
                height="28"
                width="28"
                fit="cover"
                :src="player.avatarfull"
              ></van-image>
            </van-col>
            <van-col class="u-text-left u-line-1" span="10">{{
              player.personaname
            }}</van-col>
            <van-col span="4">{{ player.games }}</van-col>
            <van-col span="4"
              >{{ (player.win_probability * 100).toFixed(2) }}%</van-col
            >
          </van-row>
        </div>
      </div>
      <div
        class="u-absolute u-type-primary-light"
        style="bottom:20px;width:100%;"
        @click="handleToNext"
      >
        <van-icon
          v-animate="{ name: 'fadeInDown', duration: 2000, infinite: true }"
          size="30"
          name="arrow-down"
        />
      </div>
    </div>
    <!-- 游戏胜率最低 -->
    <div class="section" id="section4">
      <div
        v-if="active[4]"
        class="u-absolute u-type-primary-light"
        style="top:20px;width:100%;"
      >
        <div class="u-flex u-row-between u-m-b-20 u-p-r-10 u-p-l-10">
          <div
            class="u-flex u-flex-row"
            v-animate="{ name: 'lightSpeedInLeft', delay: 500 }"
          >
            <div>
              <van-image
                round
                height="40"
                width="40"
                fit="cover"
                :src="palyerAvatar"
              ></van-image>
            </div>
            <div class="u-font-18 u-m-l-4">
              <div class="u-m-b-4">游戏胜率</div>
              <div class="u-type-warning">最低</div>
            </div>
          </div>
          <div v-animate="{ name: 'lightSpeedInRight', delay: 500 }">
            <div>
              <van-image
                round
                height="30"
                width="30"
                fit="cover"
                class="u-m-b-4"
                :src="peerListSortByWinProbabilityReverse[0]?.avatarfull"
              ></van-image>
              <div>
                <van-tag type="danger" class="u-m-r-4">1st</van-tag>
                {{ peerListSortByWinProbabilityReverse[0]?.personaname }}
              </div>
            </div>
          </div>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">你 与 TA 并肩作战了 </span>
          <span class="u-font-20" style="color:red;font-weight:700;">{{
            peerListSortByWinProbabilityReverse[0]?.games
          }}</span>
          <span class="u-font-14"> 场游戏</span>
        </div>

        <div class="u-m-b-20" v-animate="{ name: 'jackInTheBox', delay: 1000 }">
          <span class="u-font-14">游戏胜率 </span>
          <span class="u-font-20" style="color:red;font-weight:700;"
            >{{
              (
                peerListSortByWinProbabilityReverse[0]?.win_probability * 100
              ).toFixed(2)
            }}%</span
          >
        </div>

        <div
          class="u-m-b-40 u-font-14"
          v-animate="{ name: 'jackInTheBox', delay: 1000 }"
        >
          开黑不为胜利 即使BURDEN 不离不弃
        </div>

        <van-row
          class="u-m-b-4"
          v-animate="{ name: 'slideInRight', delay: 1000 }"
        >
          <van-col span="4">排名</van-col>
          <van-col span="12">昵称</van-col>
          <van-col span="3">场数</van-col>
          <van-col span="3">胜率</van-col>
        </van-row>
        <div
          class="u-m-b-4 u-font-12 u-p-r-10 u-p-l-10"
          v-for="(player, index) in peerListSortByWinProbabilityReverse.slice(
            1,
            10
          )"
          :key="player.account_id"
          v-animate="{ name: 'slideInRight', delay: 1000 + index * 100 }"
        >
          <van-row
            class="u-line-1"
            type="flex"
            justify="space-around"
            align="center"
          >
            <van-col class="u-text-left" span="2">
              <van-tag type="primary">{{ index + 2 }}</van-tag>
            </van-col>
            <van-col span="4">
              <van-image
                round
                height="28"
                width="28"
                fit="cover"
                :src="player.avatarfull"
              ></van-image>
            </van-col>
            <van-col class="u-text-left u-line-1" span="10">{{
              player.personaname
            }}</van-col>
            <van-col span="4">{{ player.games }}</van-col>
            <van-col span="4"
              >{{ (player.win_probability * 100).toFixed(2) }}%</van-col
            >
          </van-row>
        </div>
      </div>
      <div
        class="u-absolute u-type-primary-light"
        style="bottom:20px;width:100%;"
        @click="handleToNext"
      >
        <van-icon
          v-animate="{ name: 'fadeInDown', duration: 2000, infinite: true }"
          size="30"
          name="arrow-down"
        />
      </div>
    </div>
    <!-- 总结 -->
    <div class="section" id="section5">
      <div v-if="active[5]">
        <div
          class="u-absolute u-type-primary-light "
          style="top:20px;width:100%;margin:0 auto;"
          v-animate="{ name: 'rotateIn', delay: 1000 }"
        >
          <div class="u-m-b-10">
            <span class="u-m-r-4 u-font-14">我是</span
            ><span class="u-font-20 u-font-bold">{{ playerName }}</span>
          </div>
          <div>
            这是我的Dota2<span class="u-font-20 u-type-error">好友榜</span>
          </div>
        </div>
        <div
          class="u-absolute u-type-primary-light "
          style="top:25%;width:90%;margin:0 5%;"
          v-animate="{ name: 'flipInX', delay: 2000 }"
        >
          <van-row class="u-m-b-10" type="flex" align="center">
            <van-col span="2">
              <van-image
                class="u-flex-1"
                :src="peerListSortByGameCount[0]?.avatarfull"
                round
                width="28"
                height="28"
              ></van-image
            ></van-col>
            <van-col span="16">
              <div class="u-text-left u-line-1 u-p-l-10">
                {{ peerListSortByGameCount[0]?.personaname }}
              </div>
            </van-col>
            <van-col span="6">
              <van-tag mark type="success">场次最高</van-tag>
            </van-col>
          </van-row>

          <van-row class="u-m-b-10" type="flex" align="center">
            <van-col span="2">
              <van-image
                class="u-flex-1"
                :src="peerListSortByGameCountReverse[0]?.avatarfull"
                round
                width="28"
                height="28"
              ></van-image
            ></van-col>
            <van-col span="16">
              <div class="u-text-left u-line-1 u-p-l-10">
                {{ peerListSortByGameCountReverse[0]?.personaname }}
              </div>
            </van-col>
            <van-col span="6">
              <van-tag mark type="primary">场次最低</van-tag>
            </van-col>
          </van-row>

          <van-row class="u-m-b-10" type="flex" align="center">
            <van-col span="2">
              <van-image
                class="u-flex-1"
                :src="peerListSortByWinProbability[0]?.avatarfull"
                round
                width="28"
                height="28"
              ></van-image
            ></van-col>
            <van-col span="16">
              <div class="u-text-left u-line-1 u-p-l-10">
                {{ peerListSortByWinProbability[0]?.personaname }}
              </div>
            </van-col>
            <van-col span="6">
              <van-tag mark type="danger">胜率最高</van-tag>
            </van-col>
          </van-row>

          <van-row class="u-m-b-10" type="flex" align="center">
            <van-col span="2">
              <van-image
                class="u-flex-1"
                :src="peerListSortByWinProbabilityReverse[0]?.avatarfull"
                round
                width="28"
                height="28"
              ></van-image
            ></van-col>
            <van-col span="16">
              <div class="u-text-left u-line-1 u-p-l-10">
                {{ peerListSortByWinProbabilityReverse[0]?.personaname }}
              </div>
            </van-col>
            <van-col span="6">
              <van-tag mark type="warning">胜率最低</van-tag>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="u-absolute" style="bottom:10%;width:100%;margin:0 auto;">
        <van-button
          style="width:160px"
          v-animate="{ name: 'pulse', duration: 2400, infinite: true }"
          round
          type="danger"
          @click="handleToShare"
          >分享</van-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { getPlayerPeers, getPlayers } from "@/api/player";
import { onUnmounted, onMounted, ref } from "vue";
import fullpage from "fullpage.js";
import { useRoute } from "vue-router";
import { deepClone } from "@/utils/index";
const route = useRoute();
const active = ref({
  0: true,
});
const playerName = ref("匿名玩家");
const palyerAvatar = ref("");
const peerList = ref([]);
const peerListSortByGameCount = ref([]);
const peerListSortByGameCountReverse = ref([]);
const peerListSortByWinProbability = ref([]);
const peerListSortByWinProbabilityReverse = ref([]);
const loading = ref(true);
let _fullPage;
const getHighestGamesCount = (peerList) => {
  let _peerList = deepClone(peerList);
  return _peerList.sort((a, b) => {
    return b.games - a.games;
  });
};

const getHighestWinPer = (peerList) => {
  let _peerList = deepClone(peerList);
  return _peerList.sort((a, b) => {
    return b.win_probability - a.win_probability;
  });
};

onMounted(() => {
  _fullPage = new fullpage("#fullpage", {
    licenseKey: null,
    onLeave: function(origin, destination) {
      active.value[destination.index] = true;
    },
  });
  loading.value = true;
  Promise.all([
    getPlayers(route.params.account_id),
    getPlayerPeers(route.params.account_id),
  ])
    .then((res) => {
      playerName.value = res[0].profile.personaname;
      palyerAvatar.value = res[0].profile.avatarfull;
      res[1].forEach((item) => {
        item.win_probability = item.with_win / item.games;
      });
      peerList.value.push(...res[1]);
      peerListSortByGameCount.value = getHighestGamesCount(peerList.value);
      peerListSortByGameCountReverse.value = getHighestGamesCount(
        peerList.value
      ).reverse();
      peerListSortByWinProbability.value = getHighestWinPer(peerList.value);
      peerListSortByWinProbabilityReverse.value = getHighestWinPer(
        peerList.value
      ).reverse();
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
});
onUnmounted(() => {
  _fullPage.destroy("all");
});
const handleToNext = () => {
  _fullPage.moveSectionDown();
};
const handleToShare = () => {
};
</script>
<style lang="scss" scoped>
#section0 {
  background: url(http://cdn.maxjia.com/image/hero/bg1.jpg) no-repeat 100% 100%;
  background-color: rgb(25, 25, 25);
  background-size: cover;
}
#section1,
#section2,
#section3,
#section4 {
  background: url(http://cdn.maxjia.com/image/hero/bj_new.png) no-repeat 100%
    100%;
  background-color: rgb(25, 25, 25);
  background-size: cover;
}
#section5 {
  background: url(http://cdn.maxjia.com/image/hero_share_bg.png) no-repeat 100%
    100%;
  background-color: rgb(25, 25, 25);
  background-size: cover;
}
</style>
